import React, { useState } from 'react';
import { Card, Grid, DatePicker } from 'antd-mobile';
import { DownOutline,UpOutline } from 'antd-mobile-icons';
import dayjs from 'dayjs';
import './MonthlyBill.css';

const MonthlyBill = () => {
  // 控制日期选择器的显示/隐藏
  const [pickerVisible, setPickerVisible] = useState(false);
  
  const formattedDate = new Date()


  // 存储当前选择的日期，默认为2023年2月
  const [currentDate, setCurrentDate] = useState(formattedDate);

  // 格式化日期显示
  const formatBillDate = (date) => {
    return `${dayjs(date).format('YYYY')} | ${dayjs(date).format('M月')}账单`;
  };

  const selectTjDate = (date) => {
    setCurrentDate(date);
    setPickerVisible(false);
    const selectedDate = dayjs(date).format('YYYY-MM-DD');
    console.log(selectedDate);
  }

  return (
    <div className="monthly-bill-container">
      <h3 className="main-title">月度收支</h3>
      <Card className="bill-card">
        {/* 背景装饰元素 */}
        <div className="card-background-shape"></div>

        {/* 月份选择器 */}
        <div 
          className="date-picker-trigger"
          onClick={() => setPickerVisible(true)}
        >
          <span>{formatBillDate(currentDate)}</span>
          {!pickerVisible && <DownOutline fontSize={14} />}
          {pickerVisible && <UpOutline  fontSize={14} />}
        </div>

        {/* 收支数据展示 */}
        <Grid columns={3} className="stats-grid">
          <Grid.Item>
            <div className="stat-value">0.00</div>
            <div className="stat-label">支出</div>
          </Grid.Item>
          <Grid.Item>
            <div className="stat-value">0.00</div>
            <div className="stat-label">收入</div>
          </Grid.Item>
          <Grid.Item>
            <div className="stat-value">0.00</div>
            <div className="stat-label">结余</div>
          </Grid.Item>
        </Grid>
      </Card>

      {/* antd-mobile 日期选择器组件 */}
      <DatePicker
        title="选择账单月份"
        visible={pickerVisible}
        onClose={() => setPickerVisible(false)}
        precision="month"
        value={formattedDate}
        onConfirm={(val)=>selectTjDate(val)}
      />
    </div>
  );
};

export default MonthlyBill;